<template>
	<view class="box">
		<view class="header">
			<view class="tabBox">
				<view @click="searchRang(3)" :class="{ 'tarBarBorder' : form.search_dataRang === 3 }">我的</view>
				<view @click="searchRang(2)" :class="{ 'tarBarBorder' : form.search_dataRang === 2 }">上级运营商</view>
			</view>
		</view>
		<view style="padding: 10px; color: #A1A1A1; font-size: 14px; margin-top: 50px;">
			说明：禁音时段，充电柜无语音提示，请根据相关要求设置
		</view>
		<view v-if="!forbiddenBox.length" style="text-align: center; padding-top: 50px; color: #999;">
			暂无更多数据
		</view>
		<uni-card v-for="(item, index) in forbiddenBox" :key="index" title="" extra="">
			<template v-slot:title>
				<view style="border-bottom: 1px solid #E6E6E6;">
					<view style="padding: 10px;">
						<text v-if="form.search_dataRang === 3" style="color: #1875D2; font-weight: bold;">禁音时段设置</text>
						<text v-else style="color: #1875D2; font-weight: bold;">{{ item.organization.name }}</text>
						<text v-if="form.search_dataRang === 3" @click="addForbidden(index)" class="icon iconfont"
							style="float: right;">&#xe600;</text>
						<button v-else @click="copyForbidden(item)" type="primary" size="mini"
							style="background-color: #4DA7FF; float: right; position: relative; bottom: 8rpx;">复制</button>
					</view>
				</view>
			</template>
			<view v-for="(items, indexs) in forbiddenBox[index].listTimeRang" :key="indexs" class="uni-body"
				style="font-size: 16px!important; margin-bottom: 10px;">
				<view style="color: #1875D2!important; margin-bottom: 10px;">
					时段{{ chinaBox[indexs + 1] }}：
					<text v-if="form.search_dataRang === 3" @click="deleteTimes(index, indexs)" class="icon iconfont"
						style="float: right; color: #B9B9B9;">&#xe74b;</text>
					<view class="clear"></view>
				</view>
				<picker :disabled="form.search_dataRang !== 3" style="display: inline-block; margin-right: 20px;"
					mode="multiSelector" @change="startChange($event, item, index, items, indexs)"
					:value="items.startTime.split(':')" :range="timeOptions">
					<view class="uni-input"
						style="color: #000000!important; border-bottom: 1px solid #E5E5E5; text-align: center; padding: 5rpx 60rpx 8rpx 10rpx; display: inline-block;">
						{{items.startTime}}</view>
				</picker>
				至
				<picker :disabled="form.search_dataRang !== 3" style="display: inline-block; margin-left: 20px;"
					mode="multiSelector" @change="endChange($event, item, index, items, indexs)"
					:value="items.endTime.split(':')" :range="timeOptions">
					<view class="uni-input"
						style="color: #000000!important; border-bottom: 1px solid #E5E5E5; text-align: center; padding: 5rpx 10rpx 8rpx 60rpx; display: inline-block;">
						{{items.endTime}}</view>
				</picker>
			</view>
		</uni-card>
		<view v-if="form.search_dataRang === 3" style="padding: 10px 4%; text-align: center;">
			<button :loading="saveLoading" @click="save()" type="primary" size="mini"
				style="margin-right: 20rpx; background-color: #4DA7FF; width: 48%; height: 80rpx; line-height: 80rpx;">保存</button>
			<button @click="back()" type="primary" size="mini"
				style="background-color: #C2C2C2; width: 48%; height: 80rpx; line-height: 80rpx;">取消</button>
		</view>
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				saveLoading: false,
				form: {
					search_dataRang: 3
				},
				forbiddenBox: [],
				chinaBox: ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二', '十三', '十四', '十五', '十六', '十七',
					'十八', '十九', '二十', '二一', '二二', '二三', '二四'
				],
				timeOptions: [
					['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15',
						'16', '17', '18', '19', '20', '21', '22', '23'
					],
					['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15',
						'16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31',
						'32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47',
						'48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59'
					],
					['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15',
						'16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31',
						'32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47',
						'48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59'
					]
				],
				msgType: '',
				messageText: ''
			}
		},
		onLoad() {
			this.getDetail();
		},
		methods: {
			// 选择查询范围
			searchRang(e) {
				this.form.search_dataRang = e;
				this.getDetail();
			},
			getDetail() {
				let param = this.form;
				getApp().globalData.request('/api/disable-voice-times', param).then(res => {
					if (this.form.search_dataRang === 3) {
						if (res.data) {
							this.forbiddenBox = res.data;
						} else {
							this.forbiddenBox = [{
								listTimeRang: [{
									startTime: '00:00:00',
									endTime: '00:00:00'
								}],
							}];
						}
					} else {
						if (res.data) {
							this.forbiddenBox = res.data;
						} else {
							this.forbiddenBox = [];
						}
					}
				});
			},
			// 时段选择起止
			startChange: function(e, item, index, items, indexs) {
				this.index = e.target.value;
				this.forbiddenBox[index].listTimeRang[indexs].startTime =
					`${this.timeOptions[0][this.index[0]]}:${this.timeOptions[1][this.index[1]]}:${this.timeOptions[2][this.index[2]]}`;
				item.startTime = this.forbiddenBox[index].listTimeRang[indexs].startTime;
			},
			endChange: function(e, item, index, items, indexs) {
				this.index = e.target.value;
				this.forbiddenBox[index].listTimeRang[indexs].endTime =
					`${this.timeOptions[0][this.index[0]]}:${this.timeOptions[1][this.index[1]]}:${this.timeOptions[2][this.index[2]]}`;
				item.endTime = this.forbiddenBox[index].listTimeRang[indexs].endTime;
			},
			// 添加时段
			addForbidden(index) {
				if (this.forbiddenBox[index].listTimeRang.length > 23) {
					this.msgType = 'error';
					this.messageText = `最多添加24个时段`
					this.$refs.message.open()
				} else {
					this.forbiddenBox[index].listTimeRang.push({
						startTime: '00:00:00',
						endTime: '00:00:00'
					});
				}
			},
			// 删除时段
			deleteTimes(index, indexs) {
				if (this.forbiddenBox[index].listTimeRang[indexs].length <= 1) {
					this.msgType = 'error';
					this.messageText = `至少保留一个时段`
					this.$refs.message.open()
				} else {
					this.forbiddenBox[index].listTimeRang.splice(indexs, 1);
				}
			},
			// 复制时段
			copyForbidden(item) {
				this.form.search_dataRang = 3;
				this.forbiddenBox = [];
				this.forbiddenBox.push({
					listTimeRang: item.listTimeRang
				});
				for (let i = 0; i < this.forbiddenBox[0].listTimeRang.length; i++) {
					this.$delete(this.forbiddenBox[0].listTimeRang[i], 'createTime');
					this.$delete(this.forbiddenBox[0].listTimeRang[i], 'createUser');
					this.$delete(this.forbiddenBox[0].listTimeRang[i], 'id');
				}
			},
			// 保存
			save() {
				this.saveLoading = true;
				getApp().globalData.request('/api/disable-voice-times', this.forbiddenBox[0].listTimeRang, 'POST').then(
					res => {
						if (res.code === 200) {
							this.msgType = 'success';
							this.messageText = '保存成功'
							this.$refs.message.open()
							this.saveLoading = false;
							setTimeout(() => {
								let pages = getCurrentPages(); // 当前页面
								let beforePage = pages[pages.length - 2]; // 上一页
								uni.navigateBack({
									success: function() {
										beforePage.onLoad(); // 执行上一页的onLoad方法
									}
								});
								// uni.navigateBack({
								// 	success: () => {
								// 		let page = getCurrentPages().pop();  //跳转页面成功之后
								// 		if (!page) {
								// 			return;
								// 		} else {
								// 			page.onLoad(page.options);// page自带options对象.
								// 		}
								// 	}
								// })
							}, 500)
						} else {
							this.msgType = 'error';
							this.messageText = res.message
							this.$refs.message.open()
							this.saveLoading = false;
						}
					});
			},
			// 返回
			back() {
				let pages = getCurrentPages(); // 当前页面
				let beforePage = pages[pages.length - 2]; // 上一页
				uni.navigateBack({
					success: function() {
						beforePage.onLoad(); // 执行上一页的onLoad方法
					}
				});
				// uni.navigateBack();
			}
		}
	}
</script>

<style>
	.header {
		width: 100%;
		background-color: #1976D3;
		position: fixed;
		top: 0px;
		z-index: 1;
	}

	.tabBox {
		width: 100%;
		background-color: #FFFFFF;
	}

	.tabBox view {
		width: 50%;
		line-height: 40px;
		text-align: center;
		color: #1976D3;
		display: inline-block;
	}

	.tarBarBorder {
		border-bottom: 2px solid #1976D3;
	}

	.listBtn {
		width: 250rpx;
		height: 60rpx;
		line-height: 60rpx;
		float: left;
		text-align: center;
		color: #FFFFFF;
		background-color: #4DA7FF;
		border-radius: 5px;
	}

	/deep/ button::after {
		border: none;
	}
</style>
